<template>
  <Row class="layout-content-body">
    <dtable 
      :columns="columns" 
      :data-all="dataAll" 
      :data-show="dataShow" 
      :totals="total" 
      :loading="loading" 
      director 
      add 
      del-check 
      reset 
      check 
      op 
      @refresh="getall()" 
      @add="add" 
      @del="del" 
      @edit="edit" 
      @reset="reset" 
      @delCheck="delCheck" 
      @changePage="changePage" 
      @director="director"
    />
    <Modal 
      v-model="editData" 
      title="用户信息" 
      :mask-closable="false" 
      class="editm" 
      @on-ok="asyncOK" 
      @on-cancel="asyncCancel"
    >
      <Form 
        ref="editForm" 
        :model="formItem" 
        :label-width="80" 
        :rules="ruleValidate"
      >
        <Form-item 
          label="账号" 
          prop="Name"
        >
          <Input 
            v-model="formItem.Name" 
            placeholder="请输入" 
            :disabled="addid" 
            @on-enter="asyncOK()"
          ></Input>
        </Form-item>
        <Form-item 
          label="姓名" 
          prop="Pname"
        >
          <Input 
            v-model="formItem.Pname" 
            placeholder="请输入" 
            @on-enter="asyncOK()"
          ></Input>
        </Form-item>
        <Form-item 
          label="所属单位" 
          prop="Organization"
        >
          <Select 
            v-model="formItem.Organization" 
            disabled 
            placeholder="请选择"
          >
            <Option 
              v-for="item in org" 
              :key="item.Id" 
              :value="item.Id"
            >{{ item.Name }}</Option>
          </Select>
        </Form-item>
        <Form-item 
          label="所属部门" 
          prop="Organization"
        >
          <Select 
            v-model="formItem.DeptId" 
            placeholder="请选择"
          >
            <Option 
              v-for="item in dept" 
              :key="item.Id" 
              :value="item.Id"
            >{{ item.Name }}</Option>
          </Select>
        </Form-item>
        <Form-item 
          label="角色" 
          prop="RoleId"
        >
          <Select 
            v-model="formItem.RoleId" 
            placeholder="请选择"
          >
            <Option 
              v-for="item in role" 
              :key="item.Id" 
              :value="item.Id"
            >{{ item.Name }}</Option>
          </Select>
        </Form-item>
        <Form-item 
          label="状态" 
          prop="Status"
        >
          <Radio-group v-model.number="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item 
          label="说明" 
          prop="Remark"
        >
          <Input 
            v-model="formItem.Remark" 
            type="textarea" 
            :autosize="{minRows: 2,maxRows: 5}" 
            placeholder="请输入..."
          >
        </Input>
        </Form-item>
      </Form>
    </Modal>
    <Modal 
      v-model="directorFlag" 
      title="设置检验员" 
      @on-ok="directorOk"
    >
      <Form>
        <Form-item label="">
          <RadioGroup v-model="directorItem.directorType">
            <Radio 
              v-for="item in directorArray" 
              :key="item.value" 
              :label="item.value"
            >{{ item.name }}</Radio>
          </RadioGroup>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>

<script>
import dtable from '@/components/table/dtable.vue'; // 采用biztable
export default {
  components: {
    dtable
  },
  data () {
    return {
      loading: false, // 数据刷新遮罩层
      columns: [
        // 多选框
        {
          title: '账号',
          key: 'Name',
          sortable: true
        },
        {
          title: '姓名',
          key: 'Pname',
          sortable: true
        },
        {
          title: '角色',
          key: 'RoleName',
          sortable: true
        },
        {
          title: '所属单位',
          key: 'OrgName',
          sortable: true
        },
        {
          title: '部门',
          key: 'DeptName',
          sortable: true
        },
        {
          title: '状态',
          key: 'Sname',
          sortable: true
        }
      ], // 表格样式
      dataAll: [], // 表格数据来源
      dataShow: true, // 是否显示表格数据查看表单
      editData: false, // 显示编辑表单
      formItem: {
        Name: '',
        Pname: '',
        RoleId: 31,
        RoleName: '',
        Organization: '',
        DeptId: '',
        OrgName: '',
        Status: 1,
        Remark: ''
      }, // 数据编辑表单
      ruleValidate: {
        Name: [
          {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          }
        ],
        Pname: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }
        ],
        RoleId: [
          {
            required: true,
            message: '角色不能为空',
            trigger: 'change'
          }
        ]
      }, // 数据编辑表单验证规则
      addid: true, // true为修改模式，false为添加模式
      role: [],
      org: [],
      dept: [],
      total: 0,
      directorFlag: false,
      directorItem: {
        directorType: 0
      },
      directorArray: [
        {
          name: '痕迹',
          value: 0
        },
        {
          name: '法医',
          value: 1
        },
        {
          name: 'DNA',
          value: 2
        },
        {
          name: '理化',
          value: 3
        },
        {
          name: '文检',
          value: 4
        },
        {
          name: '电子物证',
          value: 5
        }
      ],
      directorTmp: {}
    };
  },
  computed: {
    state () {
      return this.$store.state.app;
    }
  },
  watch: {},
  mounted () {
    let self = this;
    self.getall();
    self.getOrganization();
    self.getRole();
    self.getDept();
  },
  methods: {
    //     获取资源名称
    getNameById (value) {
      let rname = '';
      if (value || '') {
        let rv = this.dataAll.filter((col, index) => col.Id === value);
        rname = rv[0].Name;
      }
      return rname;
    },
    director (row) {
      console.log(row);
      if (row.length != 1) {
        this.$Message.error('请选择一行！');
        return;
      }
      this.directorTmp = row[0];
      this.directorFlag = true;
    },
    directorOk () {
      // console.log(this.directorTmp)
      this.directorTmp.JdType = this.directorItem.directorType;
      this.$api.updateUser(this.directorTmp).then(
        res => {
          if (!res.error) {
            this.getall();
            this.directorItem.directorType = 0;
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    //      改变页码
    changePage (pagedata) {
      this.loading = true;
      this.$api.GetAllOrgUsers(pagedata).then(res => {
        if (!res.error) {
          this.total = res.Data.total;
          this.dataAll = res.Data.tabledata;
        } else {
          this.$Message.error(res.message);
        }
      });
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getall () {
      this.loading = true;
      this.$api.GetUsersByRole().then(
        res => {
          if (!res.error) {
            console.log(res.Data);
            this.dataAll = res.Data;
            this.total = res.Data.length;
          } else {
            this.$Message.error(res.message);
          }
        },
        error => {
          this.$Message.error(res.message, 4);
        }
      );
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getOrganization () {
      this.$api.getOrganizationList().then(
        res => {
          if (!res.error) {
            this.org = res.Data;
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    getDept () {
      this.spinShow = true;
      this.$api.GetDept().then(
        res => {
          if (!res.error) {
            this.dept = res.Data.tabledata;
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    getRole () {
      this.spinShow = true;
      this.$api.GetOrgRoleList().then(
        res => {
          if (!res.error) {
            this.role = res.Data;
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    edit (index) {
      this.addid = true;
      this.formItem = index;
      this.editData = true;
    },
    add () {
      this.addid = false;
      this.$refs['editForm'].resetFields();
      this.formItem.Organization = this.state.userInfo.Organization.Id;
      this.formItem.DeptId = this.state.userInfo.Dept[0].Id;
      this.formItem.RoleId = '';
      this.editData = true;
    },
    asyncOK () {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.addid) {
            this.$api.updateUser(this.formItem).then(
              res => {
                if (!res.error) {
                  this.getall();
                  this.$Message.success(res.message);
                } else {
                  this.$Message.error(res.message, 4);
                }
              },
              err => {
                this.$Message.error(res.message, 4);
              }
            );
          } else if (!this.addid) {
            this.$api.addUser(this.formItem).then(
              res => {
                if (!res.error) {
                  this.getall();
                  this.$Message.success(res.message);
                } else {
                  this.$Message.error(res.message, 4);
                }
              },
              err => {
                this.$Message.error(res.message, 4);
              }
            );
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error('表单验证失败!');
        }
      });
      this.editData = false;
      this.$refs['editForm'].resetFields();
    },
    asyncCancel () {
      this.getall();
      this.$refs['editForm'].resetFields();
    },
    del (row) {
      this.$api.deleteUser(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    delCheck (row) {
      this.$api.deleteUsers(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(res.message, 4);
        }
      );
    },
    reset (row) {
      this.$api.ResetPwd(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(err, 4);
        }
      );
    }
  }
};
</script>
